<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<style type="text/css">
			.mui-content>.mui-table-view:first-child {
				margin-top: 1px;
			}
		</style>
	</head>

	<body>
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content">
			<!--数据列表-->
			<ul class="mui-table-view mui-table-view-chevron">

			</ul>
		</div>
		<script>
			var _self;
			if(window.plus) {
				plusReady();
			} else {
				document.addEventListener("plusready", function() {
					plusReady();
				}, false);
			}

			function plusReady() {
				_self = plus.webview.currentWebview();
				_self.setPullToRefresh({
					support: true,
					height: '50px',
					range: '100px',
					style: 'circle',
					offset: '1px'
				}, pulldownRefresh);
				
				plus.key.addEventListener("backbutton",function () {
					_self.close("auto");
				},false);
			}

			function addData() {
				var table = document.body.querySelector('.mui-table-view');
				var cells = document.body.querySelectorAll('.mui-table-view-cell');
				for(var i = cells.length, len = i + 5; i < len; i++) {
					var li = document.createElement('li');
					li.className = 'mui-table-view-cell';
					li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
					//下拉刷新，新纪录插到最前面；
					table.insertBefore(li, table.firstChild);
				}
			}
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function() {
					addData();
					_self.endPullToRefresh();
				}, 1500);
			}

			addData();
			addData();
			
			mui = {};
			mui.back = function () {
				_self.close("auto");
			}
			
		</script>
	</body>

</html>